<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="ClientTemplate.xhtml">   
        <ui:define name="body"> 
            <h:form>        
                <h:panelGrid columns="1">                
                    <h:outputText value="Select Elevation Type:"/>            
                    <p:selectOneMenu value="#{elevationController.tblElevationType}">                                
                        <f:selectItems value="#{elevationTypeController.itemsAvailableSelectOne}"/>
                        <p:ajax event="change" update="listElevation"/>
                    </p:selectOneMenu>                 
                </h:panelGrid>
                <p:commandButton value="Find Elevation" update="listElevation"/>
                <p:dataGrid id="listElevation" var="item"  value="#{elevationController.tblElevationByEtID}" columns="3" rows="12" paginator="true" 
                            paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"
                            rowsPerPageTemplate="9,12,15" paginatorPosition="bottom">
                    <p:panel header="#{item.elName}" style="text-align: center">
                        <p:panelGrid columns="1" style="width: 100%">
                            <h:graphicImage value="#{resource['images:icon/images.jpg']}" width="130" height="130"/>
                            <h:outputText value="Desciprtion: #{item.elDescription}"  style="text-align: left;display: block;"/>
                            <h:outputText value="#{item.elID}"/>
                            <p:commandButton value="Order" action="#{orderDetailsController.addToCart(item)}">                                                        
                            </p:commandButton>
                        </p:panelGrid>
                    </p:panel>
                </p:dataGrid>
            </h:form>
            <h:form>            
                <h:outputText id="detailOrder" value="Details of Order" rendered="#{not empty orderDetailsController.cartBean}"/>
                <h:panelGroup id="pgOrderDetails" rendered="#{not empty orderDetailsController.cartBean}">
                    <p:dataTable var="odItem" value="#{orderDetailsController.cartBean.cart}">
                        <p:column headerText="Elevation Name">
                            <h:outputText value="#{odItem.tblElevation.elName}"/>
                        </p:column>
                        <p:column headerText="Quantity">
                            <h:outputText value="#{odItem.oddQuantity}"/>
                        </p:column>
                        <p:commandButton></p:commandButton>
                    </p:dataTable>
                </h:panelGroup>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

